<template>
  <div id="sceneContainer"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
let scene
onMounted(async () => {
  window.sandbox = await new GCMap.Sandbox({ elemId: 'sceneContainer' })
  store.commit('setSandboxReady', true)
  scene = window.sandbox.scene

  window.addEventListener('resize', onWindowResize)
  document.addEventListener('keydown', (e) => {
    if (e.key === 'v') {
      const { camera, controls } = window.sandbox
      console.log(
        'position:',
        { x: camera.position.x.toFixed(6) - 0, y: camera.position.y.toFixed(6) - 0, z: camera.position.z.toFixed(6) - 0 }
      )
      console.log(
        'target:',
        { x: controls.target.x.toFixed(6) - 0, y: controls.target.y.toFixed(6) - 0, z: controls.target.z.toFixed(6) - 0 }

      )
    }
  })
  await initLight()
})

function onWindowResize () {
  window.sandbox.camera.aspect = window.innerWidth / window.innerHeight
  //   更新摄像机的投影矩阵
  window.sandbox.camera.updateProjectionMatrix()
  //   更新渲染器
  window.sandbox.renderer.setSize(window.innerWidth, window.innerHeight)
  //   设置渲染器的像素比
  window.sandbox.renderer.setPixelRatio(window.devicePixelRatio)

  window.sandbox.renderer.render(window.sandbox.scene, window.sandbox.camera)
}

async function initLight () {
  window.sandbox.renderer.setClearColor('#000')
  window.sandbox.scene.background = new GC.Color('#000')

  // const hdrPath = window.modelUrl + "/HDR/Day.hdr"; //studio_small_03_1k Day
  // const rgbloader = new GC.RGBELoader();
  // await rgbloader.loadAsync(hdrPath).then((texture) => {
  //   texture.mapping = GC.EquirectangularRefractionMapping; // 映射：等距球面投影
  //   scene.environment = texture; // 给场景所有的物体添加默认的环境贴图
  //   // scene.background = texture;
  //   // window.sandbox.renderer.setClearColor("#000");
  //   // window.sandbox.scene.background = new GC.Color("#000");
  // });

  // const hdrPath02='/HDR/Day.hdr'
  // await rgbloader.loadAsync(hdrPath02).then(texture => {
  //   texture.mapping = GC.EquirectangularRefractionMapping // 映射：等距球面投影
  //  scene.background = texture;
  // })

  // scene.background = new GC.CubeTextureLoader().load(
  //   [0, 1, 2, 3, 4, 5].map(k => `https://z2586300277.github.io/3d-file-server/` + 'files/sky/skyBox0/' + (k + 1) + '.png')
  // );
  // loadSkyBox(skyBoxArray[4].path);
}

const skyBoxArray = [
  {
    name: '晴天',
    path: 'sunday'
  },
  {
    name: '多云',
    path: 'CloudsLayer'
  },
  {
    name: '晚霞',
    path: 'SummerSky'
  },
  {
    name: '晚上',
    path: 'night'
  },
  {
    name: '星空',
    path: 'starSky'
  },
  {
    name: 'spaceSky',
    path: 'spaceSky'
  }
]
function loadSkyBox (skyPath) {
  // const path = `./sky/${skyPath}/`;
  // window.sandbox.logger.log(window.baseUrl)
  const path = `${window.modelUrl}/skyBox/${skyPath}/`
  const format = '.png'
  const urls = [
    path + 'nx' + format,
    path + 'px' + format,
    path + 'ny' + format,
    path + 'py' + format,
    path + 'nz' + format,
    path + 'pz' + format
  ]
  const reflectionCube = new GC.CubeTextureLoader().load(urls)
  const refractionCube = new GC.CubeTextureLoader().load(urls)
  refractionCube.mapping = GC.CubeRefractionMapping
  scene.background = reflectionCube
}
</script>
<style>
#sceneContainer {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #303d51;
  color: #fff;

  perspective: 100px; /* 设置透视距离 */
  transform-style: preserve-3d;
  -webkit-font-smoothing: antialiased;
}
</style>
